/*
 * @Author: zlanglang
 * @Date: 2020-07-04 15:14:44
 * @LastEditTime: 2020-09-08 13:50:36
 * @LastEditors: zxc
 * @Description: webpack扩展，基于customize-cra库
 */ 
const {
  override,
  fixBabelImports,
  addWebpackAlias,
  addLessLoader,
  adjustStyleLoaders
} = require('customize-cra');

const chalk = require('chalk');
const path = require('path');
const resolve = dir => path.join(__dirname, '.', dir);

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

const progressBarPlugin = new ProgressBarPlugin({
  width: 60, // 长度60,
  complete: chalk.bgRed(' '),
  incomplete: chalk.bgWhite(' '),
  format: '🔍 Build :bar ' + chalk.green(':percent') + ' (:elapsed seconds) ',
  clear: false
});



module.exports = override(

  // addCustomize(),
    // 自定义 alias 方便导入
    addWebpackAlias({
      '@': resolve('src'),
      '_': resolve('src/components'),
  }),


  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style 的选项 ‘css' 表示引入的css文件   true 表示引入的less
    style: true,
  }),
  // 这里设置less
  // 同时是定制ant-design的主题
  // ant-design 定制主题变量： https://ant.design/docs/react/customize-theme-cn
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#d214a2',
      '@font-size-base': '12px',
    }
  }),
  adjustStyleLoaders(({ use: [ , css, postcss, resolve, processor ] }) => {
    css.options.sourceMap = false;         // css-loader
  }),
  (config) => {
    // 去掉打包生产map 文件
    if (process.env.NODE_ENV === "production") config.devtool = false;
    config.plugins.push(progressBarPlugin)
    return config
}
);